<template>
  <div class="appearance">
    <div class="theme-back-title">{{ $t("setup.appearanceInfo.back") }}</div>
    <div class="theme-back-content">
      <svg-icon
        v-for="themeBg in themeBgColorList"
        :key="themeBg.id"
        :class="{
          'svg-icon-selected': currentThemeBack == themeBg.id,
        }"
        :icon-class="themeBg.id"
        width="64"
        height="48"
        @click="handleChangeBack(themeBg.id)"
      />
    </div>
    <div class="theme-color-title">{{ $t("setup.appearanceInfo.color") }}</div>
    <div class="theme-color-content">
      <div
        class="theme-color-item loc-center"
        v-for="color in themeSelectedColorList"
        :key="color.id"
      >
        <span
          class="color-item"
          :style="{ backgroundColor: color.color }"
          @click="changeThemeColor(color)"
        >
          <svg-icon
            v-if="currentThemeColor == color.id"
            icon-class="check"
            width="20"
            height="20"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      currentThemeBack: null,
      currentThemeColor: null,
    };
  },
  computed: {
    ...mapState({
      themeBgColorList: (state) => state.systemStyle.themeBgColorList,
      themeSelectedColorList: (state) =>
        state.systemStyle.themeSelectedColorList,
    }),
  },
  created() {
    const themeConfig = localStorage.getItem("themeConfig");
    this.currentThemeBack = themeConfig.slice(0, themeConfig.search(/[A-Z]/));
    this.currentThemeColor = themeConfig.slice(themeConfig.search(/[A-Z]/));
  },
  methods: {
    // 切换背景
    handleChangeBack(back) {
      this.currentThemeBack = back;
      localStorage.setItem("themeConfig", back + this.currentThemeColor);
      this.changeSystemDefault("back");
    },
    // 切换主色
    changeThemeColor(color) {
      this.currentThemeColor = color.id;
      localStorage.setItem("themeConfig", this.currentThemeBack + color.id);
      this.changeSystemDefault("color");
    },
    // 修改系统默认背景或颜色
    changeSystemDefault(type) {
      this.$store.dispatch("setSystemDefaultStye");
    },
  },
};
</script>

<style lang="scss" scoped>
.appearance {
  .theme-back-title,
  .theme-color-title {
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .theme-back-content {
    display: flex;
    align-items: center;
    margin-bottom: 32px;

    .svg-icon {
      cursor: pointer;
    }

    .svg-icon:not(:last-child) {
      margin-right: 16px;
    }

    .svg-icon-selected {
      border-radius: 6px;
      box-sizing: content-box;
      background-color: var(--app-primary-base);
      border: 2px solid var(--app-primary-base);
    }
  }

  .theme-color-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;

    .theme-color-item {
      .color-item {
        position: relative;
        width: 32px;
        height: 32px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #0000;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
}
</style>